<template>
  <view class="container-cancelReason">
    <header @click="$goPath(1)">
      <image src='/static/images/right-white.png' mode='aspectFit|aspectFill|widthFix' alt=""  />
      <view >取消订单</view>
    </header>

    <section>
      <view>
        <view>个人原因</view>
        <view class='sect-reason' v-for="(item,index) in selfReason" :key="index" @click="handleCheckReason(item)" >
          <u-radio-group v-model="checkedID" placement="column" iconPlacement="right">
            <u-radio :label="item.text" :name="item.id" activeColor="#32B499" :customStyle="{marginBottom: '12px'}"></u-radio>
          </u-radio-group>
        </view>

        <view class='submit-btn'>
          <view @click="handleSubmit()">提交</view>
        </view>
      </view>
    </section>
  </view>
</template>

<script>

export default {
  data() {
    return {
      orderId: '',
      checkedID: -1,
      cancelReason: '',
      selfReason: [
        { id: 0, text: '临时有事无法收货' },
        { id: 1, text: '电话/地址填写错误' },
        { id: 2, text: '忘记使用兜兜卡' },
        { id: 3, text: '备注信息忘记填或者填错' },
        { id: 4, text: '买错/买多/漏买/暂不需要商品' }
      ]
    }
  },
  onLoad(options) {
    this.orderId = options.orderId;
  },
  methods: {
    handleCheckReason(item) {
      this.checkedID = item.id;
      this.cancelReason = item.text;
    },

    handleSubmit() {
      if(this.checkedID == -1) {
				uni.showToast({ title: '请选择取消原因', icon: 'none' });
      } else {
        this.$request.cancelOrder({ orderId: this.orderId, cancelReason: this.cancelReason  }).then(res => {
          if(res.code == 200 && res.isSuccess) {
						uni.showToast({ title: '订单已取消', icon: 'success' });
            this.$goPath(1)
          } else {
						uni.showToast({ title: res.msg, icon: 'none' });
          }
        });
      }
    },
  },



}
</script>
<style scoped>
.container-cancelReason {
  width: 100%;
  height: 100vh;
  font-size: 28rpx;
  background-color: #FED14E;
  display: flex;
  flex-direction: column;
  font-family: 'PingFang SC-Medium';
}

.container-cancelReason > header {
  width: 100%;
  padding: 120rpx 24rpx 80rpx;
  border-radius: 0 0 40rpx 40rpx;
  box-sizing: border-box; 
  color: #fff; 
  background-color: #32B499;  
  background-image: url('https://youpindou.com/miniProgram/image/showImg?imgUrl=/home/ypd/images/homeTopIcon.png');
  background-size: 100% auto;
  background-repeat: no-repeat;
  font-size: 40rpx;
  font-family: 'PingFang SC-Bold';
  display: flex;
  align-items: center;
}

.container-cancelReason header > image {
  width: 16rpx;
  height: 32rpx;
  display: block;
  margin-right: 6rpx;
}

.container-cancelReason section {
  flex: 1;
  padding: 28rpx 28rpx 0;
  box-sizing: border-box;
  position: relative;
  top: -80rpx;
}

.container-cancelReason section > view {
  width: 100%;
  height: 100%;
  background-color: #fff;
  border-radius: 20rpx;
  padding: 24rpx;
  box-sizing: border-box;
  position: relative;
}

.container-cancelReason section > view > view {
  margin-bottom: 24rpx;
  font-size: 24rpx;
  font-family: 'PingFang SC-Regular';
}

.container-cancelReason .sect-reason {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 28rpx;
  font-family: 'PingFang SC-Medium';
}

.submit-btn {
  width: 100%;
  position: absolute;
  bottom: calc(env(safe-area-inset-bottom) + 12px);
  left: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.submit-btn > view {
  width: 90%;
  height: 80rpx;
  background: #37B79B;
  border-radius: 40rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
}
</style>